<template>
    <div class="searchlist">
        <van-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch" />
         <van-pull-refresh v-model="refreshingall" @refresh="onRefresh(99)">
                    <van-list v-model="loadingall" :finished="finishedall" finished-text="没有更多了" @load="onLoad(99)"
                        :immediate-check="false">
                        <van-card :price="item.paid_fee" :desc="item.description" :title="item.title"
                            :thumb="item.cover" v-for="(item, index) in listall" :key="index">
                            <template #bottom>
                                <div class="priceBottom red" v-if="item.paid == 1">已签收</div>
                                <div class="priceBottom red" v-if="item.paid == 2">已购买</div>
                                <div class="priceBottom red" v-if="item.paid == 3">退款完结</div>
                                <div class="priceBottom red" v-if="item.paid == 0">待支付</div>
                            </template>
                            <template #footer>
                                <van-button round size="small" v-if="item.paid == 2 || item.paid==1 || item.paid==0" @click="gokefuchat(item.id)">联系客服</van-button>
                                <van-button round size="small" v-if="item.paid == 2" @click="todrawback(item.id)">退款
                                </van-button>
                                <van-button round size="small" v-if="item.paid == 1" plain type="danger"
                                    @click="toevaluate()">去评价</van-button>
                                <van-button round size="small" v-if="item.paid == 3" @click="deleterecord()">删除记录
                                </van-button>
                                <van-button round size="small" plain type="danger" v-if="item.paid == 0" @click="confirm()">继续付款</van-button>
                            </template>
                        </van-card>
                    </van-list>
         </van-pull-refresh>
        <xjmenubar :menubar="tabbar" :prevent="false" :cactive="cactive"></xjmenubar>
    </div>
</template>

<script>
import xjmenubar from '@/components/shop/xjmenubar.vue';
export default {
    name: 'orderseachlist',
    components: {
        xjmenubar
    },
    data() {
        return {
            searchdata: '',
            tabbar: '',
            listall: [], //视频数据列表
            orderlistall: [], //每次获取10个cardlist数据
            loadingall: true,
            finishedall: false,
            refreshingall: false,
            pageall: 1, //第1页数据
            totalall: '', //获得总cardlist总数
            value:'',
            cactive: 0, //菜单索引
        };
    },
    methods: {
        async getPhonePageData() {
            let res = await this.$frontaxios.post(this.$front.getPhonePageData);
            //console.log(res);
            if (!res.data) {
                this.$notify({ type: 'warning', message: '请设置店铺首页，再过来查看' });
                return;
            }
            if (res.code == 1) {
                this.tabbar = res.data.tabbar;
            } else {
                this.$notify({ type: 'warning', message: res.msg });
            }
        },
        async onLoad(paid) {
            if (this.refreshingall) {
                this.listall= [];
                this.refreshingall = false;
            }
            await this.getOrderList(paid);
            this.listall.push(...this.orderlistall);
            this.pageall++;
            this.loadingall = false;
            if (this.listall.length >= this.totalall) {
                this.finishedall = true;
            }
        },
        onRefresh() {
            // 清空列表数据
            this.finishedall = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loadingall = true;
            this.pageall = 1;
            this.onLoad(99);
            this.$toast.success('刷新成功');
        },
        async getOrderList(paid) {
            //获得教程视频信息
             let query = {
                paid,
                page: 1,
                limit: 4,
                keyword: this.searchdata
            };
            switch (paid) {
                case 99: //全部订单
                    query.page = this.pageall;
                    let resall = await this.$frontaxios.post(this.$front.getOrderList, query);
                    if (resall.code == 1) {
                        this.loadingall = true;
                        this.orderlistall = resall.data.orderlist;
                        this.totalall = resall.data.total;
                    } else {
                        console.log('没有获取到全部的订单');
                    }
             break;
             }
        },
        clickColumn(id) {
            //console.log(id);
            this.$router.push({
                name: 'product',
                query: {
                    id
                }
            });
        },
          //联系客服按钮
        gokefuchat(orderid) {
            this.$router.push({ name: "kefuchat",query:{orderid}});
        },
        onSearch() {
            localStorage.setItem('ordersearchdata',this.value);
            this.$router.push({
                name: 'ordersearchlist',
                params: {
                    searchdata:this.value
                }
            });
            setTimeout(()=>{
                this.$router.replace({name:'frontrefresh'});
            },200);        
         }
    },
    async created() {
        this.searchdata = localStorage.getItem('ordersearchdata') ? localStorage.getItem('ordersearchdata') : this.$route.params.searchdata;
        this.getPhonePageData(); //获得菜单栏数据初始化菜单数据
        this.onLoad(99);
    }
};
</script>

<style lang="scss" scoped>
	.searchlist {
	.van-button {
    padding: 0 1rem 0 1rem;
}

.priceBottom {
    background-color: #EEE;
    border-radius: 2px;
    padding-left: 5px;
}

.content {
    padding: 16px 16px 50px;
}

img {
    width: 98px;
}

.van-action-sheet__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.notarize {
    width: 90%;
    border-radius: 1rem;
    background-color: #ee8c33;
    color: #fff;
}

.red {
    color: red;
}
	}
</style>
